<!-- 监控记录 -->
<template>
    <div class="complaintHistory">
		<!-- 标题栏 -->
		  <myheader title="监控记录史记录" rightBtn="主页" @updataInfo="submitRecruit"></myheader>
			
			<ul class="complaintHistory_ul">
				<li v-for="(item,index) in complaintHistoryList" :key="item.id" >
					<!-- 时间 -->
					<div class="complaintHistory_ul_li_div1">
						<div>2021年4月10日</div>
						<div>待审核</div>
					</div>
					<!-- 内容 -->
					<div class="complaintHistory_ul_li_div2_one">
							<li class="complaintHistory_ul_li_div2_one_magin">
								<div class="complaintHistory_ul_li_div2">
									<div class="complaintHistory_ul_li_div2_title">标题</div>
									<div>我的内容我的内容我的内容我的内容我的内容我的内容我的内容我的内容</div>
								</div>
							</li>
					</div>	
				</li>
				
				
				
			</ul>
			
		</div>
</template>

<script>
	import myheader from '../../../comon/myheader.vue'
export default {
    data () {
      return {
				complaintHistoryList:[
					{
						id:1,
						createDate:"2021年4月10日",
						status:"0",//0待审核，1已收到
						title:"标题",
						content:"我的内容我的内容我的内容我的内容我的内容我的内容我的内容我的内容",
					},
					{
						id:2,
						createDate:"2021年4月10日",
						status:"0",//0待审核，1已收到
						title:"标题",
						content:"我的内容我的内容我的内容我的内容我的内容我的内容我的内容我的内容",
					},
				]
			}
    },

    methods: {},

    components: {
			myheader,
		},
}
</script>

<style scoped>
	.complaintHistory_ul{
		padding: 3%;
	}
	.complaintHistory_ul_li_div1{
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		
		position:  relative;
	}
	
	.complaintHistory_ul_li_div1>div:first-child{
		padding-left: 20px;
	}
	/* 画圈圈 */
	.complaintHistory_ul_li_div1::before{
		position:absolute;
		content: "";
		display: block;
		height: 100%;
		width: 16px;
		/* padding-bottom: 16px; */
		margin: auto;
		background-color: #39A9ED;
		border-radius: 50%;
		top: 50%;
		/* left: 50%; */
		transform: translate( 0,-50%);
	}
	/* 内容 */
	.complaintHistory_ul_li_div2{
		padding-top: 5%;
		padding-bottom: 5%;
		padding-left: 3%;
		padding-right: 3%;
		background-color: #F1F1F1;
		font-size: 16px;
		margin-left: 20px;
	}
	.complaintHistory_ul_li_div2_one{
		position: relative;
		
	}
	.complaintHistory_ul_li_div2_one::before{
		position:absolute;
		content: "";
		display: block;
		height: 100%;
		width: 2px;
		margin: auto;
		background-color: #39A9ED;
		top: 50%;
		left: 9px;
		transform: translate( 0,-50%);
		/* left: 50%; */
	}
	.complaintHistory_ul_li_div2_one_magin{
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.complaintHistory_ul_li_div2_title{
		font-weight: bold;
	}
</style>
